<template>
	<div class="test">
		<div class="theme">
			主题切换:白色背景变量只写了两个作为示意,以后如果有需求再补充
			<input type="radio" name="gender" v-model="type" value="default" checked @change="onChange" />default
			<input type="radio" name="gender" v-model="type" value="white" @change="onChange" />white
		</div>
		<!-- 小标题 -->
		<div style="margin-bottom: 20px">
			<CustomCard title="电量指标" />
		</div>

		<!-- 表单 -->
		<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" :inline="true" status-icon>
			<el-form-item label="姓名" prop="name">
				<el-input v-model="ruleForm.name" placeholder="请输入..." />
			</el-form-item>
			<el-form-item label="禁用input" prop="name">
				<el-input v-model="ruleForm.name" placeholder="请输入..." disabled />
			</el-form-item>

			<el-form-item label="计数器">
				<el-input-number v-model="ruleForm.num111" :min="1" :max="10" placeholder="请输入..." />
			</el-form-item>
			<el-form-item label="计数器">
				<el-input-number v-model="ruleForm.num111" :min="1" :max="10" placeholder="请输入..." disabled />
			</el-form-item>
			<el-form-item label="地域" prop="region">
				<el-select v-model="ruleForm.region" placeholder="请选择" :popper-append-to-body="false" clearable>
					<el-option label="选项1" value="shanghai" />
					<el-option label="选项2" value="beijing" disabled />
					<el-option label="选项3" value="shanghai2" />
					<el-option label="选项4" value="beijing2" />
				</el-select>
			</el-form-item>
			<el-form-item label="地域" prop="region">
				<el-select v-model="ruleForm.region" placeholder="请选择" :popper-append-to-body="false" disabled>
					<el-option label="Zone one" value="shanghai" />
					<el-option label="Zone two" value="beijing" disabled />
				</el-select>
			</el-form-item>
			<el-form-item label="国家" prop="count">
				<el-select v-model="ruleForm.count" placeholder="请选择" multiple :popper-append-to-body="false">
					<el-option
						:label="item.label"
						:value="item.value"
						v-for="(item, index) in options"
						:key="index"
						:disabled="item.disabled"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="时间">
				<el-form-item>
					<el-date-picker
						v-model="ruleForm.date1"
						type="daterange"
						range-separator="至"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
					/>
				</el-form-item>
			</el-form-item>
			<el-form-item label="时间">
				<el-form-item>
					<el-date-picker
						v-model="ruleForm.date1"
						type="daterange"
						range-separator="至"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						disabled
					/>
				</el-form-item>
			</el-form-item>
			<el-form-item label="切换" prop="delivery">
				<el-switch v-model="ruleForm.delivery" />
			</el-form-item>
			<el-form-item label="切换" prop="delivery">
				<el-switch v-model="ruleForm.delivery" disabled />
			</el-form-item>
			<el-form-item label="类型" prop="type">
				<el-checkbox-group v-model="ruleForm.type">
					<el-checkbox :label="1"> 选项1 </el-checkbox>
					<el-checkbox :label="2"> 选项2 </el-checkbox>
					<el-checkbox :label="3" disabled> 选项3 </el-checkbox>
					<el-checkbox :label="4" disabled> 选项4 </el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="来源" prop="resource">
				<el-radio-group v-model="ruleForm.resource">
					<el-radio label="1">选项1</el-radio>
					<el-radio label="2">选项2</el-radio>
					<el-radio label="3">选项3</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="描述" prop="desc">
				<el-input v-model="ruleForm.desc" type="textarea" disabled class="custom-textarea-border" />
			</el-form-item>
			<el-form-item label="多行输入" prop="name">
				<el-input v-model="ruleForm.name" placeholder="请输入..." type="textarea" :row="2" />
			</el-form-item>
			<el-form-item label="图片上传" prop="name">
				<div style="color: var(--font-second-color)">
					未完待续，由于没有上传接口，
					<br />有些状态不能很好的展示，等后续在补充完整
				</div>
			</el-form-item>
		</el-form>
		<!-- 穿梭框和树 -->
		<div style="display: flex; margin-top: 30px">
			<!-- 穿梭框 -->
			<div class="transfer-box">
				<p>穿梭框</p>
				<el-transfer
					v-model="leftValue"
					filterable
					:left-default-checked="[2, 3]"
					:right-default-checked="[1]"
					filter-placeholder="请输入"
					target-order="push"
					:data="data"
				>
					<template #button-right>
						<div>hell</div>
					</template>
					<template #button-left>
						<i class="el-icon el-icon-minus custom-icon"></i>
					</template>
				</el-transfer>
			</div>
			<!-- 树 -->
			<div class="tree-style">
				<p>树</p>
				<base-tree
					placeholder="请输入要搜索的位置"
					ref="treeRef"
					:treeData="treeData"
					:enableFilter="false"
					:isOpen="true"
					:showCheckbox="true"
					:checkStrictly="false"
					:defaultProps="{ label: 'label', children: 'children', disabled: 'disabled' }"
				></base-tree>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import baseTree from "@/components/baseTree";
import CustomCard from "@/components/CustomCard";
interface Option {
	key: number;
	label: string;
	disabled: boolean;
}
interface RuleForm {
	name: string;
	region: string;
	count: string;
	date1: string[];
	date2: string;
	delivery: boolean;
	location: string;
	type: number[];
	resource: string;
	desc: string;
	num111: number;
}
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
	name: "zhendefeg测试",
	region: "",
	count: "1",
	date1: [],
	date2: "",
	delivery: true,
	location: "",
	type: [2, 4],
	resource: "1",
	desc: "zhendefeg测试",
	num111: 1
});
//树数据
const treeData = [
	{
		label: "一级 1",
		children: [
			{
				label: "二级-1-1",
				children: [
					{
						label: "三级 1-1-1"
					}
				]
			}
		]
	},
	{
		label: "一级 2",
		children: [
			{
				label: "二级 2-1",
				children: [
					{
						label: "三级 2-1-1"
					}
				]
			},
			{
				label: "二级 2-2",
				children: [
					{
						label: "三级 2-2-1"
					}
				]
			}
		]
	},
	{
		label: "一级 3",
		children: [
			{
				label: "二级 3-1",
				disabled: true,
				children: [
					{
						label: "三级 3-1-1",
						disabled: true
					}
				]
			},
			{
				label: "二级 3-2",
				children: [
					{
						label: "三级 3-2-1"
					}
				]
			}
		]
	}
];
const rules = reactive<FormRules<RuleForm>>({
	name: [
		{ required: true, message: "Please input Activity name", trigger: "blur" },
		{ min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" }
	],
	region: [
		{
			required: true,
			message: "必填项",
			trigger: "change"
		}
	],
	date1: [
		{
			type: "date",
			required: true,
			message: "必填项",
			trigger: "change"
		}
	],
	desc: [{ required: true, message: "Please input activity form", trigger: "blur" }]
});
const options = Array.from({ length: 7 }).map((_, idx) => ({
	value: `${idx + 1}`,
	label: `${"选项" + idx}`,
	disabled: idx === 2 ? true : false
}));
const generateData = (): Option[] => {
	const data: Option[] = [];
	for (let i = 1; i <= 6; i++) {
		data.push({
			key: i,
			label: `Option ${i}`,
			disabled: i % 2 === 0
		});
	}
	return data;
};

const data = ref(generateData());
const leftValue = ref([1]);

const type = ref("default");
function onChange() {
	document.documentElement.setAttribute("theme-mode", type.value);
}
</script>
<style scoped lang="scss">
.theme {
	margin: 30px 0;
	color: #fff;
}

.test {
	margin: 30px;
	margin-bottom: 30px;
}

.transfer-box {
	margin-top: 30px;

	p {
		font-size: 16px;
		color: #fff;
		line-height: 30px;
	}
}
.tree-style {
	margin: 40px;
	p {
		font-size: 16px;
		color: #fff;
		line-height: 30px;
		margin-left: 30px;
	}
}
</style>
<style>
.app-main {
	background-color: var(--bg-color) !important;
}
</style>
